<template>
    <div class="case-item" :class="{
        'case-item--line': props.line,
    }" @click="onJump(item)">
        <div class="case-item__tips" v-if="item.tips">
            {{ item.tips }}
        </div>
        <div class="case-item__image">
            <var-image :src="['工业元宇宙', '教育元宇宙'].includes(item.name) ||
                item.file.includes('gif')
                ? item.file
                : item.file +
                `?x-oss-process=image/resize,w_${props.line ? 750 : 660
                }//watermark,image_` +
                toBase64(
                    'water/logo_white.png?x-oss-process=image/resize,P_30'
                ) +
                ',g_center,t_60'
                " :fit="item.type == 1 ? 'cover' : 'fill'" lazy alt="北京华锐云空间" />

            <div class="review-num">
                <img :src="`${_oss_}images/works/icon-view-white.png`" alt="北京华锐云空间" />
                <span>{{ item.page_view || 0 }}</span>
            </div>
        </div>

        <div class="case-item__info">
            <div class="case-item__top">
                <div class="case-item__title">
                    {{ (item.is_single == 1 && props.isNew) ? item.name : item.is_single == 1 ? "" : item.name }}
                </div>

                <img class="share-btn" @click.stop="onShare(item)" :src="`${_oss_}images/icon-share-btn.png`" />
            </div>

            <div class="case-item__middle" v-if="item.work_id">
                <div class="price">
                    售价：<span class="red">{{
                        item.price > 0 ? "￥" + item.price : "免费"
                    }}</span>
                </div>

                <template v-if="item.price > 0">
                    <div class="buying" v-if="item.is_buy">已购买</div>

                    <var-button class="btn-buy" type="primary" @click.stop="onBuy(item)" v-else-if="!userStore.isLogin ||
                        userStore.userInfo.id != item.publisher
                        ">
                        购买
                    </var-button>
                </template>
            </div>

            <div class="case-item__bottom">
                <div class="icon-item like-item" :class="{ active: item.is_like }" @click.stop="onLike(item)">
                    <img v-if="item.is_like" :src="`${_oss_}images/mobile/works/icon-like-active.png`" />
                    <img v-else :src="`${_oss_}images/mobile/works/icon-like.png`" />
                    <span>{{ item.like || 0 }}</span>
                </div>

                <div class="icon-item star-item" :class="{ active: item.is_star }" @click.stop="onStar(item)">
                    <img v-if="item.is_star" :src="`${_oss_}images/mobile/works/icon-star-active.png`" />
                    <img v-else :src="`${_oss_}images/mobile/works/icon-star.png`" />
                    <span>{{ item.star || 0 }}</span>
                </div>

                <div class="icon-item comment-item" @click.stop="onComment(item)">
                    <img :src="`${_oss_}images/mobile/works/icon-comment.png`" alt="北京华锐云空间" />
                    <span>{{ item.comment || 0 }}</span>
                </div>

                <div class="icon-item share-item" @click.stop>
                    <img :src="`${_oss_}images/works/icon-share.png`" alt="北京华锐云空间" />
                    <span>{{ item.share || 0 }}</span>
                </div>
            </div>
        </div>
    </div>

    <DialogWorkPayServiceM ref="payServiceRef" @confirm="onPayConfirm(item)" />
    <DialogWorkPayM ref="payRef" @success="onPaySuccess(item)" />
</template>
<script setup>
import { useContent } from ".";
import { useCaseLike, useCaseStar } from "@/hooks";
const { onLike } = useCaseLike();
const { onStar } = useCaseStar();
const {
    payRef,
    payServiceRef,
    onBuy,
    onJump,
    onShare,
    onComment,
    onPayConfirm,
    onPaySuccess,
} = useContent();
const userStore = useUserStore();

const props = defineProps({
    isNew: {
        type: Boolean,
        default: false
    },
    item: {
        type: Object,
        default: () => ({}),
    },
    line: {
        type: Boolean,
        default: false,
    },
});
</script>
<style lang="scss" scoped>
.case-item {
    width: 165px;
    position: relative;
    margin-right: 14px;
    margin-bottom: 26px;
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(1, 23, 86, 0.1);
    border-radius: 3px;
    overflow: hidden;

    &--line {
        width: 100%;
        height: auto;
        margin-right: 0;

        .case-item__image {
            width: 100%;
            height: auto;

            .var-image {
                width: 100%;
                height: 110px;
                overflow: hidden;

                :deep(.var-image__image) {
                    width: 100%;
                    height: auto;
                }
            }

            img {
                width: 100%;
                height: auto;
            }
        }
    }

    &:nth-of-type(2n) {
        margin-right: 0;
    }

    &__tips {
        position: absolute;
        left: 0;
        top: 0;
        padding: 4px 8px;
        font-size: 10px;
        color: #fff;
        background: linear-gradient(-90deg, #ff3527, #ff8846);
        border-radius: 0 0 6px 0;
        z-index: 9;
    }

    &__image {
        width: 100%;
        height: 110px;
        object-fit: cover;
        overflow: hidden;

        .var-image {
            width: 100%;
            height: 100%;
        }

        .review-num {
            position: absolute;
            right: 5px;
            top: 5px;
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 12px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 5px;
            border-radius: 4px;

            img {
                margin-right: 5px;
                width: 14px;
            }
        }
    }

    &__info {
        width: 100%;
        padding: 8px 0 14px;
    }

    &__top {
        width: 100%;
        padding: 0 10px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &__middle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px 10px;

        .buying {
            color: #666;
            padding: 8px 0;
            font-size: 12px;
            line-height: 1em;
            flex-shrink: 0;
            border-radius: 4px;
            user-select: none;
            cursor: pointer;
        }

        .btn-buy {
            width: 40px;
            height: 22px;
            padding: 0;
            border-radius: 3px;
            font-size: 12px;
            line-height: 1em;
            margin-left: auto;
            box-shadow: none;
        }

        .price {
            font-size: 12px;
            color: #666;

            .red {
                color: #f00;
            }
        }
    }

    &__bottom {
        width: 100%;
        display: flex;
        align-items: center;
        color: #333;
        padding: 10px 10px 0;
        border-top: 1px solid #ddd;

        .icon-item {
            display: flex;
            align-items: center;
            font-size: 12px;
            margin-right: 15px;

            &:last-of-type {
                margin-right: 0;
            }

            img {
                margin-right: 4px;
            }

            &.like-item,
            &.star-item {
                cursor: pointer;

                img {
                    transition: all 0.2s;
                }

                &:active img {
                    transform: scale(1.3);
                }
            }

            &.like-item {
                img {
                    width: 13px;
                    height: 12px;
                }
            }

            &.star-item {
                img {
                    width: 13px;
                    height: 13px;
                }
            }

            &.comment-item {
                img {
                    width: 12px;
                    height: 12px;
                }
            }
        }
    }

    &__title {
        width: 100%;
        font-size: 14px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .share-btn {
        width: 16px;
        height: 16px;
    }
}
</style>
